(function () {
    z._richtext_index = 1;
    z.richtext = function (opts) {
        if ( ! opts.elem) {
            alert('please select a text box');
            return;
        }
        var elem = z.s(opts.elem);
        
        var wrap = document.createElement('div');
        wrap.className = 'richtext_wrap';
        elem.parentNode.insertBefore(wrap, elem);
        
        var head = document.createElement('div');
        head.className = 'richtext_head';
        wrap.appendChild(head);
        init_head(head);
        
        /*var iframe = document.createElement("iframe");
        iframe.src = 'javascript:""';
        iframe.frameborder = '0';
        iframe.style.width = elem.offsetWidth + 'px';
        iframe.style.height = elem.offsetHeight + 'px';
        iframe.className = 'richtext';
        iframe.id = 'ifr_' + elem.id;
        wrap.appendChild(iframe);*/
        
        var iframe =z.s('news_content_ifr');
        wrap.appendChild(iframe);
        iframe.src = 'javascript:""';
        iframe.frameborder = '0';
        iframe.style.width = elem.offsetWidth + 'px';
        iframe.style.height = elem.offsetHeight + 'px';
        var doc = iframe.contentWindow.document;
        
        /*var innerHTML = '';
        if (elem.innerHTML) innerHTML = elem.innerHTML;*/
        
        /*iframe.iframe_html = '<html id="' + iframe.id +'"><head><link rel="stylesheet" href="' + 
                z.cdn_url('css/main.css') + '" type="text/css" />' + 
                '</head><body id="' + iframe.id + '">' + innerHTML + '</body></html>';*/
        
        
        
        //iframe.contentWindow.document.body.contentEditable = true;
        
        /*//doc.designMode = "On";
        //get_win(iframe).designMode = "On";
        
        //doc.execCommand("useCSS", false);
        //exec("useCSS");
        doc.designMode = "On";
        //doc.contentEditable = true;
        z.addEvent(iframe, 'load', function() {
            doc.body.innerHTML = elem.innerHTML;
            doc.body.contentEditable = true;
            //iframe.contentDocument.designMode = "On";
        });
        
        elem.style.display = "none";*/
        /*iframe.setup = function () {
            var doc = this.contentDocument ? this.contentDocument : this.contentWindow.document;
            doc.open();
            doc.write(this.iframe_html);
            doc.close();
            this.contentWindow.document.designMode = "On";
            this.contentDocument.designMode = "on";
            if (z.isIE) {
                var b = doc.body;
                b.style.display = 'none';
                doc.body.contentEditable = true;
                b.style.display = 'block';
            }
        };
        iframe.setup();*/
        /*if ( ! z.isIE) {
            iframe.setup();
        } else {
            iframe.src = 'javascript:window.parent.z.s("' + iframe.id + '").setup();';
        }*/
        
        
        function exec(command,params) {
            var win = get_win(iframe);
            var s = get_sel(win);
            s = s || {};
            var d = win.document;
            try{
                win.focus();
                d.execCommand("bold", false, '');
                win.focus();
            }catch(e) {
                alert(e);
            }
        }
        function get_doc(iframe) {
            var doc;
            if (iframe.contentDocument) {
                doc = iframe.contentDocument;
            } else {
                var w = get_win(iframe);
                doc = w.document;
            }
            return doc;
        }
        function get_sel(w) {
            return w.getSelection ? w.getSelection() : w.document.selection;
        }
        function get_win(iframe) {
            return iframe.contentWindow;
        }
        
        function get_body(iframe) {
            return get_doc(iframe).body || document.frames[iframe.id].document.body;
        }
        function init_head(head) {
            // group 1 ------
            var group1 = document.createElement("div");
            group1.className = 'group';
            head.appendChild(group1);
            
            var b = document.createElement("span");
            group1.appendChild(b);
            b.onclick = function () {
                exec('bold');
            };
            
            var i = document.createElement('span');
            group1.appendChild(i);
            i.onclick = function () {
                exec('italic');
            };
            
            var u = document.createElement('span');
            group1.appendChild(u);
            u.onclick = function () {
                exec('underline');
            };
            
            var t = document.createElement('span');
            group1.appendChild(t);
            t.onclick = function () {
                exec('t');
            };
         //-------------- group 1 ------
            
            // group 2 --------------
            var group2 = document.createElement("div");
            group2.className = 'group';
            head.appendChild(group2);
            
            var justify_left = document.createElement("span");
            group2.appendChild(justify_left);
            justify_left.onclick = function () {
                exec('justify_left');
            };
            var justify_center = document.createElement("span");
            group2.appendChild(justify_center);
            justify_center.onclick = function () {
                exec('justify_center');
            };
            var justify_right = document.createElement("span");
            group2.appendChild(justify_right);
            justify_right.onclick = function () {
                exec('justify_right');
            };
            var justify_full = document.createElement("span");
            group2.appendChild(justify_full);
            justify_full.onclick = function () {
                exec('justify_full');
            };
            var indent = document.createElement('span');
            group2.appendChild(indent);
            indent.onclick = function () {
                exec('indent');
            };
            var outdent = document.createElement('span');
            group2.appendChild(outdent);
            outdent.onclick = function () {
                exec('outdent');
            };
            var ol = document.createElement('span');
            group2.appendChild(ol);
            ol.onclick = function () {
                exec('ol');
            };
            var ul = document.createElement('span');
            group2.appendChild(ul);
            ul.onclick = function () {
                exec('ul');
            };
            // ------------- group 2
            
            // group 3 -------------------
            var group3 = document.createElement("div");
            group3.className = 'group';
            head.appendChild(group3);
            
            var undo = document.createElement("span");
            group3.appendChild(undo);
            undo.onclick = function () {
                exec('undo');
            };
            var redo = document.createElement("span");
            group3.appendChild(redo);
            redo.onclick = function () {
                exec('redo');
            };
            // -------------------group3 
            
         // group 4 -------------------
            var group4 = document.createElement("div");
            group4.className = 'group';
            head.appendChild(group4);
            
            var link = document.createElement("span");
            group4.appendChild(link);
            link.onclick = function () {
                exec('link');
            };
            /*var unlink = document.createElement("span");
            group4.appendChild(unlink);
            unlink.onclick = function () {
                exec('unlink');
            };*/
            var img = document.createElement("span");
            group4.appendChild(img);
            img.onclick = function () {
                exec('img');
            };
            var table = document.createElement("span");
            group4.appendChild(table);
            table.onclick = function () {
                exec('table');
            };
            // -------------------group4 
            
         // group 5 -------------------
            var group5 = document.createElement("div");
            group5.className = 'group';
            head.appendChild(group5);
            
            var color = document.createElement("span");
            group5.appendChild(color);
            color.onclick = function () {
                exec('color');
            };
            var bgcolor = document.createElement("span");
            group5.appendChild(bgcolor);
            bgcolor.onclick = function () {
                exec('bgcolor');
            };
            
            // -------------------group5 
            
            
         // group 6 -------------------
            var group6 = document.createElement("div");
            group6.className = 'group';
            head.appendChild(group6);
            
            var font_size = document.createElement("select");
            group6.appendChild(font_size);
            var option0 = document.createElement('option');
            option0.value = '10';
            option0.innerHTML = '10';
            font_size.appendChild(option0);
            var option1 = document.createElement('option');
            option1.value = '11';
            option1.innerHTML = '11';
            font_size.appendChild(option1);
            var option2 = document.createElement('option');
            option2.value = '12';
            option2.innerHTML = '12';
            font_size.appendChild(option2);
            option2.selected = 'selected';
            var option3 = document.createElement('option');
            option3.value = '13';
            option3.innerHTML = '13';
            font_size.appendChild(option3);
            var option4 = document.createElement('option');
            option4.value = '14';
            option4.innerHTML = '14';
            font_size.appendChild(option4);
            var option5 = document.createElement('option');
            option5.value = '15';
            option5.innerHTML = '15';
            font_size.appendChild(option5);
            var option6 = document.createElement('option');
            option6.value = '16';
            option6.innerHTML = '16';
            font_size.appendChild(option6);
            /*font_size.innerHTML = '<option value="10">10</option><option value="11">11</option><option value="12">12</option>' + 
                '<option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>';*/
            font_size.onchange = function () {
                exec('font_size', this.options[this.selectedIndex].value);
            };

            var font_format = document.createElement("select");
            group6.appendChild(font_format);
            /*font_format.innerHTML = '<option value="paragrahp">Paragrahp</option><option value="h1">h1</option><option value="h2">h2</option>' + 
                '<option value="h3">h3</option><option value="h4">h4</option>';*/
            var option20 = document.createElement('option');
            option20.value = 'paragraph';
            option20.innerHTML = 'Paragraph';
            font_format.appendChild(option20);
            var option21 = document.createElement('option');
            option21.value = 'h1';
            option21.innerHTML = 'h1';
            font_format.appendChild(option21);
            var option22 = document.createElement('option');
            option22.value = 'h2';
            option22.innerHTML = 'h2';
            font_format.appendChild(option22);
            var option23 = document.createElement('option');
            option23.value = 'h3';
            option23.innerHTML = 'h3';
            font_format.appendChild(option23);
            var option24 = document.createElement('option');
            option24.value = 'h4';
            option24.innerHTML = 'h4';
            font_format.appendChild(option24);
            
            font_format.onchange = function () {
                exec('font_format', this.options[this.selectedIndex].value);
            };
            
            // -------------------group6 
            
            
            var icons_img = new Image();
            icons_img.src = z.cdn_url('img/icon/richtext_icons.gif');
            
            if (icons_img.complete) {
                load_icons_img(icons_img);
            } else {
                icons_img.onload = function () {
                    load_icons_img(icons_img);
                };
            }
            
            function load_icons_img(icons_img) {
                b.style.background = 'url("' + icons_img.src + '") no-repeat scroll 0 0 transparent';
                i.style.background = 'url("' + icons_img.src + '") no-repeat scroll -60px 0 transparent';
                u.style.background = 'url("' + icons_img.src + '") no-repeat scroll -140px 0 transparent';
                t.style.background = 'url("' + icons_img.src + '") no-repeat scroll -120px 0 transparent';
                
                justify_left.style.background = 'url("' + icons_img.src + '") no-repeat scroll -460px 0 transparent';
                justify_center.style.background = 'url("' + icons_img.src + '") no-repeat scroll -420px 0 transparent';
                justify_right.style.background = 'url("' + icons_img.src + '") no-repeat scroll -480px 0 transparent';
                justify_full.style.background = 'url("' + icons_img.src + '") no-repeat scroll -440px 0 transparent';
                indent.style.background = 'url("' + icons_img.src + '") no-repeat scroll -400px 0 transparent';
                outdent.style.background = 'url("' + icons_img.src + '") no-repeat scroll -540px 0 transparent';
                ol.style.background = 'url("' + icons_img.src + '") no-repeat scroll -80px 0 transparent';
                ul.style.background = 'url("' + icons_img.src + '") no-repeat scroll -20px 0 transparent';
                
                undo.style.background = 'url("' + icons_img.src + '") no-repeat scroll -160px 0 transparent';
                redo.style.background = 'url("' + icons_img.src + '") no-repeat scroll -100px 0 transparent';
                
                link.style.background = 'url("' + icons_img.src + '") no-repeat scroll -500px 0 transparent';
                //unlink.style.background = 'url("' + icons_img.src + '") no-repeat scroll -640px 0 transparent';
                img.style.background = 'url("' + icons_img.src + '") no-repeat scroll -380px 0 transparent';
                table.style.background = 'url("' + icons_img.src + '") no-repeat scroll -580px -20px transparent';
                
                color.style.background = 'url("' + icons_img.src + '") no-repeat scroll -720px 0 transparent';
                bgcolor.style.background = 'url("' + icons_img.src + '") no-repeat scroll -760px 0 transparent';
            }
        }
        
        
    };
})();